<template>
  <div class="add">
    <header>
      <BaseNavBar title="添加好友" :is-nav="true" />
    </header>
    <section class="search">
      <van-search v-model="searchValue" show-action placeholder="搜索好友" @search="onSearch" @cancel="onCancel" />
    </section>
    <main class="main">
      <section class="main_list">
        <Card>
          <section class="main_list_item" v-for="item in userList" :key="item?.id">
            <section class="user">
              <img class="user_avatar" :src="item?.avatar" v-if="item?.avatar" />
              <span class="user_name">{{ item?.nickname }} &nbsp;<van-tag plain type="primary"
                  v-if="item?.sex === 1">男</van-tag><van-tag v-if="item?.sex === 2" plain color="pink">女</van-tag></span>
            </section>
            <section class="action">
              <van-icon name="add-o" class="action_icon" @click="handleAddFriend(item)" />
            </section>
          </section>
        </Card>
      </section>
    </main>
    <van-dialog v-model:show="show" title="申请好友" show-cancel-button @confirm="handleConfirm" @cancel="handleCancel">
      <van-form>
        <van-cell-group inset>
          <van-field type="textarea" v-model="formState.remark" name="remark" label="备注" placeholder="请输入备注" />
        </van-cell-group>
      </van-form>
    </van-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { showToast } from 'vant';
import BaseNavBar from '@/components/BaseNavBar/index.vue';
import Card from '@/components/Card/index.vue';
import { getUserList } from '@/apis/user.js';
import { addShip } from '@/apis/ship';

const searchValue = ref('');


const show = ref(false);

const userList = ref([]);

const formState = ref({
  remark: '',
});



const user = ref({});
const onSearch = async () => {
  try {
    const res = await getUserList({
      pageNum: 1,
      pageSize: 9999,
      searchValue: searchValue.value
    });
    if (res?.code === 200) {
      userList.value = res?.data?.list;
      if (res?.data?.list?.length === 0) {
        showToast('暂无搜索结果');
        return;
      }
      showToast('搜索成功');
    }
  } catch (error) {
    console.log(error, 'search-error');

  }
};

const onCancel = () => {
  searchValue.value = '';

};



const handleConfirm = async () => {
  try {
    const res = await addShip({
      friendId: user.value?.id,
      remark: formState.value.remark
    });
    if (res?.code === 200) {
      showToast('申请好友成功');
      show.value = false;
      formState.value = {};
      user.value = {};
      return;
    }
    showToast(res?.msg);
  } catch (error) {
    console.log(error, 'add-friend-error');

  }
};

const handleCancel = () => {
  show.value = false;
  formState.value = {};
  user.value = {};
};
const handleAddFriend = (item) => {
  user.value = item;
  show.value = true;
};
</script>

<style lang="less" scoped>
.main {
  margin-top: 8px;

  &_list {
    &_item {
      width: 98%;
      margin: 0 auto;
      height: 48px;
      box-sizing: border-box;
      padding: 0 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}

.user {
  width: 200px;
  height: 100%;
  display: flex;
  align-items: center;

  &_avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
  }

  &_name {
    margin-left: 8px;
    font-size: 14px;
    color: #333;
  }
}

.action {
  &_icon {
    font-size: 24px;
    color: #4A90E2;
  }
}
</style>
